<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
export default defineComponent({
  name: "SectionSix",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      data_1: 25,
      data_2: 12,
      data_3: 7
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      function getRandomNum(length, max, min) {
        return new Array(length).fill().map(() => Math.floor(Math.random() * (max - min + 1)) + min);
      }
      const option = {
        grid: {
          top: "20%",
          right: "8%",
          bottom: "15%",
          left: "8%"
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let result = params[0].name + '<br/>';
            params.forEach(param => {
              result += param.marker + param.seriesName + ' : ' + param.value + ' ' + '%<br/>';
            });
            return result;
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: false
            }
          },
          textStyle: {
            fontFamily: 'ALIBABAPUHUI-REGU'
          }
        },
        // legend: {
        //   data: ["投诉率"],
        //   left: 20,
        //   top: 5,
        //   itemWidth: 13,
        //   itemHeight: 8,
        //   borderRadius: 0,
        //   icon: 'rect',
        //   itemStyle: {
        //     borderColor: '#fff',
        //     borderWidth: 1,
        //   },
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14',
        //     fontFamily: 'ALIBABAPUHUI-REGU'
        //   }
        // },
        xAxis: {
          data: ['暖域', '新阳', '幸福源', '兆源', '开源', '龙发', '海能达', '家盛', '金洲', '上合'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            rotate: 45,
            align: 'center',
            margin: 20,
            textStyle: {
              color: '#fff',
              fontSize: '14',
              fontFamily: 'alimamashuheiti',
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
            }
          }
        },
        yAxis: [
          {
            type: "value",
            name: "(%)",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
              fontFamily: 'ALIBABAPUHUI-REGU'
            },
            position: "left",
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              formatter: "{value}", //右侧Y轴文字显示
              textStyle: {
                color: '#fff',
                fontSize: '14',
                fontFamily: 'ALIBABAPUHUI-REGU'
              }
            }
          }
        ],
        series: [
          {
            name: "投诉率",
            type: "bar",
            barWidth: 12,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(254, 88, 36, 1)"
                },
                {
                  offset: 1,
                  color: "rgba(254, 88, 36, 0.2)"
                }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(255, 255, 255, 0.9)"
                },
                {
                  offset: 1,
                  color: "rgba(255, 255, 255, 1)"
                }
                ]),
                borderWidth: 1
              }
            },
            data: getRandomNum(10, 5, 20)
          }
        ],
        dataZoom: [{
          type: 'inside',
        }]
      };
      const myChart = echarts.init(document.getElementById('Tousulv'));
      myChart.setOption(option);
    }
  }
});
</script>
<template>
  <div class="section-six">
    <GlobalCard :mainTitle="'投诉率'">
      <template #body>
        <!-- 代码 -->
        <div id="Tousulv">

        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-six {
  position: fixed;
  top: 71rem;
  right: 44rem;
  height: 40rem;
}

#Tousulv {
  width: 100%;
  height: 31rem;
}
</style>